<template>
  <div class="problems-container">
    <div class="problems-main">
      <div class="filter-controls">
        <a-input-search
          v-model:value="searchQuery"
          placeholder="搜索题目或ID"
          allow-clear
          style="width: 200px"
          @search="handleFilterChange"
          @clear="handleFilterChange"
        />
        <a-select
          v-model:value="difficultyFilter"
          placeholder="难度"
          style="width: 120px"
          @change="handleFilterChange"
        >
          <a-select-option :value="0">全部</a-select-option>
          <a-select-option :value="1">简单</a-select-option>
          <a-select-option :value="2">中等</a-select-option>
          <a-select-option :value="3">困难</a-select-option>
        </a-select>
        <a-select
          v-model:value="solvedFilter"
          placeholder="解决状态"
          style="width: 120px"
          @change="handleFilterChange"
        >
          <a-select-option :value="0">全部</a-select-option>
          <a-select-option :value="1">已解决</a-select-option>
          <a-select-option :value="2">未解决</a-select-option>
        </a-select>
        <a-select
          v-model:value="sortBy"
          placeholder="排序方式"
          style="width: 120px"
          @change="handleFilterChange"
        >
          <a-select-option :value="1">按ID</a-select-option>
          <a-select-option :value="2">按难度</a-select-option>
        </a-select>
      </div>

      <div class="problems-list">
        <problem-list :problems="filteredProblems" />
      </div>
      <a-pagination
        v-model:current="problemStore.pagination.page"
        :pageSize="problemStore.pagination.pageSize || 10"
        :total="problemStore.pagination.total || 0"
        :showTotal="total => `共 ${total || 0} 条`"
        @change="handlePageChange"
        style="margin-top: 16px; text-align: center"
      />
    </div>
  </div>
</template>

<script>
import { useProblemStore } from '@/stores/problem'
import { useUserStore } from '@/stores/user'
import ProblemList from '@/components/ProblemList.vue'

export default {
  name: 'ProblemsView',
  components: {
    ProblemList
  },
  setup() {
    const problemStore = useProblemStore()
    const userStore = useUserStore()
    return {
      problemStore,
      userStore,
      problems: problemStore.problems,
      isProblemSolved: problemStore.isProblemSolved
    }
  },
    data() {
    return {
      searchQuery: '',
      difficultyFilter: 0,
      solvedFilter: 0,
      sortBy: 1
    }
  },
  computed: {
    filteredProblems() {
      return this.problemStore.problems
    }
  },
  watch: {
    difficultyFilter() {
      this.fetchProblems()
    },
    solvedFilter() {
      this.fetchProblems()
    },
    sortBy() {
      this.fetchProblems()
    }
  },
  async mounted() {
    await this.problemStore.fetchProblemList()
    await this.userStore.fetchUserStats()
  },
  methods: {
    async fetchProblems() {
      const params = {
        page: this.problemStore.pagination.page,
        pageSize: this.problemStore.pagination.pageSize,
        difficulty: this.difficultyFilter,
        solvedStatus: this.solvedFilter,
        sortBy: this.sortBy,
        searchQuery: this.searchQuery
      }
      await this.problemStore.fetchProblemList(params)
    },
    handleFilterChange() {
      this.problemStore.pagination.page = 1; // 筛选条件变化时重置页码
      this.fetchProblems()
    },
    handlePageChange(page) {
      this.problemStore.pagination.page = page;
      this.fetchProblems();
    }
  }
}
</script>

<style scoped>
.problems-container {
  display: flex;
  padding: 84px 0 20px;
  min-height: calc(100vh - 84px);
}

.problems-main {
  flex: 6;
  margin: 0 auto;
  max-width: 60%;
  padding: 0 20px;
}

.filter-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.problems-list {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>
